<template>
  <div class="count-container common-container">
    <div class="count-display-container">
      <CountTo
        ref="countExample"
        class="countTo-comp"
        :start-val="options.startValInput"
        :end-val="options.endValInput"
        :duration="options.durationInput"
        :decimals="options.decimals"
        :prefix="options.prefix"
        :suffix="options.suffix"
        :autoplay="true"
        :separator="options.separator"
      />
    </div>
    <div class="count-config-container">
      <div class="input-number-config">
        <label class="label-config"
        >起始值:
          <el-input-number
            v-model="options.startValInput"
            @change="(val) => handleChange(val, 'startValInput')"
            :min="0"
            label="描述文字"
          ></el-input-number>
        </label>
        <label class="label-config"
        >最终值:
          <el-input-number
            v-model="options.endValInput"
            @change="(val) => handleChange(val, 'endValInput')"
            :min="1"
            label="描述文字"
          ></el-input-number>
        </label>
        <label class="label-config"
        >持续时间:
          <el-input-number
            v-model="options.durationInput"
            @change="(val) => handleChange(val, 'durationInput')"
            :min="1"
            label="描述文字"
          ></el-input-number>
        </label>
        <label class="label-config"
        >小数位数:
          <el-input-number
            v-model="options.decimals"
            @change="(val) => handleChange(val, 'decimals')"
            :min="0"
            label="描述文字"
          ></el-input-number>
        </label>
      </div>
      <div class="input-config">
        <label class="label-config">
          分隔符:<el-input
          v-model="options.separator"
          @change="(val) => handleChange(val, 'separator')"
          style="width: 100px; margin-left: 10px"
        ></el-input>
        </label>
        <label class="label-config">
          前缀:<el-input
          v-model="options.prefix"
          @change="(val) => handleChange(val, 'prefix')"
          style="width: 100px; margin-left: 10px"
        ></el-input>
        </label>
        <label class="label-config">
          后缀:<el-input
          v-model="options.suffix"
          @change="(val) => handleChange(val, 'suffix')"
          style="width: 100px; margin-left: 10px"
        ></el-input>
        </label>
        <el-button class="config-button" type="primary" @click="start">开始</el-button>
        <el-button class="config-button" type="danger" @click="pauseResume">暂停/恢复</el-button>
      </div>
    </div>
    <div class="count-config-info">
      <el-descriptions title="配置项 " :column="1" border class="descriptions">
        <el-descriptions-item label="startValInput"> 起始值，默认为0 </el-descriptions-item>
        <el-descriptions-item label="endValInput"> 最终值，默认为20230807 </el-descriptions-item>
        <el-descriptions-item label="durationInput"> 持续时间，默认为6000 </el-descriptions-item>
        <el-descriptions-item label="decimals"> 小数位数 </el-descriptions-item>
        <el-descriptions-item label="separator"> 分隔符，默认为 ',' </el-descriptions-item>
        <el-descriptions-item label="prefix"> 前缀 </el-descriptions-item>
        <el-descriptions-item label="suffix"> 后缀 </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import CountTo from '@/components/CountTo/index.vue'
export default {
  name: 'index',
  components:{
    CountTo,
  },
  data(){
    return{
      options:{
        startValInput: 0,
        endValInput: 20230807,
        durationInput: 6000,
        decimals: 1,
        separator: ',',
        prefix: '价钱：',
        suffix: '元',
      }
    }
  },
  methods:{
    handleChange(val,type){

    },
    start(){
      this.$refs.countExample.start()
    },
    pauseResume(){
      this.$refs.countExample.pauseResume()
    },
  }
}
</script>

<style lang="scss" scoped>
.count-display-container{
  width: 100%;
  height: 100px;
}
.count-config-container{
  width: 100%;
  height: 120px;
}
.input-number-config{
  display: flex;
}
.label-config{
  margin: 10px 40px 10px 0;
}
.input-config{
  display: flex;
}
.count-config-info{
  margin-top: 40px;
}
</style>

<style lang="scss">
.input-number-config{
  .el-input-number{
    height: 30px;
    line-height: 30px;
  }
  .el-input{
    height: 30px;
  }
  .el-input__inner{
    height: 30px;
  }
  .el-input-number__decrease{
    height: 27px;
    top: 2px;
  }
  .el-input-number__increase{
    height: 27px;
    top: 2px;
  }
}
.input-config{
  .el-input__inner{
    height: 30px;
    line-height: 30px;
  }
}
.config-button{
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  margin-top: 10px;
}
</style>
